<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS长度单位px、em、rem | yanyan</title>
    <meta name="description" content="Yan&#39;s blog">
    <meta name="generator" content="VuePress 1.4.0">
    <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.slim.min.js"></script>
  <script src="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.css">
  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
    
    <link rel="preload" href="/assets/css/0.styles.e1b3f17d.css" as="style"><link rel="preload" href="/assets/js/app.e358a08d.js" as="script"><link rel="preload" href="/assets/js/2.88fa18d1.js" as="script"><link rel="preload" href="/assets/js/14.3e67795b.js" as="script"><link rel="prefetch" href="/assets/js/10.23baf844.js"><link rel="prefetch" href="/assets/js/11.45c148ba.js"><link rel="prefetch" href="/assets/js/12.e5930132.js"><link rel="prefetch" href="/assets/js/13.0547cd14.js"><link rel="prefetch" href="/assets/js/15.51129890.js"><link rel="prefetch" href="/assets/js/16.6987f89d.js"><link rel="prefetch" href="/assets/js/17.2807cff5.js"><link rel="prefetch" href="/assets/js/18.855e1707.js"><link rel="prefetch" href="/assets/js/19.6da24791.js"><link rel="prefetch" href="/assets/js/20.e24d4aef.js"><link rel="prefetch" href="/assets/js/21.6efc6fba.js"><link rel="prefetch" href="/assets/js/22.10447f0f.js"><link rel="prefetch" href="/assets/js/23.9154cc24.js"><link rel="prefetch" href="/assets/js/24.9ad529fc.js"><link rel="prefetch" href="/assets/js/25.4c092e0a.js"><link rel="prefetch" href="/assets/js/26.debdaa01.js"><link rel="prefetch" href="/assets/js/27.8b90b660.js"><link rel="prefetch" href="/assets/js/28.1a323e01.js"><link rel="prefetch" href="/assets/js/29.6f108fc9.js"><link rel="prefetch" href="/assets/js/3.7210d3aa.js"><link rel="prefetch" href="/assets/js/30.e7df1937.js"><link rel="prefetch" href="/assets/js/31.2cb3120f.js"><link rel="prefetch" href="/assets/js/32.eb64932c.js"><link rel="prefetch" href="/assets/js/33.cac3e2f0.js"><link rel="prefetch" href="/assets/js/34.19ea35c4.js"><link rel="prefetch" href="/assets/js/35.fadf5d03.js"><link rel="prefetch" href="/assets/js/36.88b681f1.js"><link rel="prefetch" href="/assets/js/37.2a799db9.js"><link rel="prefetch" href="/assets/js/38.2741a2bf.js"><link rel="prefetch" href="/assets/js/39.359ceb72.js"><link rel="prefetch" href="/assets/js/4.9e938666.js"><link rel="prefetch" href="/assets/js/40.56fd4a10.js"><link rel="prefetch" href="/assets/js/41.e72117ad.js"><link rel="prefetch" href="/assets/js/42.63a6e190.js"><link rel="prefetch" href="/assets/js/43.c8072421.js"><link rel="prefetch" href="/assets/js/44.84cd8367.js"><link rel="prefetch" href="/assets/js/45.0ac810b0.js"><link rel="prefetch" href="/assets/js/46.bb83ff34.js"><link rel="prefetch" href="/assets/js/47.a9333a81.js"><link rel="prefetch" href="/assets/js/48.526b5494.js"><link rel="prefetch" href="/assets/js/49.73b61cc6.js"><link rel="prefetch" href="/assets/js/5.88b252c7.js"><link rel="prefetch" href="/assets/js/50.f34ab799.js"><link rel="prefetch" href="/assets/js/51.d06a49d9.js"><link rel="prefetch" href="/assets/js/52.348d5482.js"><link rel="prefetch" href="/assets/js/6.0face56b.js"><link rel="prefetch" href="/assets/js/7.31eca58d.js"><link rel="prefetch" href="/assets/js/8.69e9ce95.js"><link rel="prefetch" href="/assets/js/9.f25df9e1.js">
    <link rel="stylesheet" href="/assets/css/0.styles.e1b3f17d.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">yanyan</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!---->  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><a href="/html/001" class="sidebar-heading clickable"><span>HTML</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/css/image" class="sidebar-heading clickable open"><span>CSS</span> <span class="arrow down"></span></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/css/image.html" class="sidebar-link">01.图片</a></li><li><a href="/css/px.html" class="active sidebar-link">02.长度单位px、em、rem ...</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/css/px.html#css长度单位" class="sidebar-link">CSS长度单位</a></li><li class="sidebar-sub-header"><a href="/css/px.html#物理像素-设备像素" class="sidebar-link">物理像素(设备像素)</a></li><li class="sidebar-sub-header"><a href="/css/px.html#分辨率" class="sidebar-link">分辨率</a></li><li class="sidebar-sub-header"><a href="/css/px.html#css像素px" class="sidebar-link">CSS像素px</a></li><li class="sidebar-sub-header"><a href="/css/px.html#em" class="sidebar-link">em</a></li><li class="sidebar-sub-header"><a href="/css/px.html#rem" class="sidebar-link">rem</a></li><li class="sidebar-sub-header"><a href="/css/px.html#em与rem" class="sidebar-link">em与rem</a></li><li class="sidebar-sub-header"><a href="/css/px.html#rpx" class="sidebar-link">rpx</a></li><li class="sidebar-sub-header"><a href="/css/px.html#vw-和-vh" class="sidebar-link">vw 和 vh</a></li><li class="sidebar-sub-header"><a href="/css/px.html#vmin-和-vmax" class="sidebar-link">vmin 和 vmax</a></li></ul></li><li><a href="/css/juzhong.html" class="sidebar-link">03.水平垂直居中</a></li><li><a href="/css/float.html" class="sidebar-link">04.浮动布局的优点？有什么缺点？清除浮动有哪些方式</a></li><li><a href="/css/bfc.html" class="sidebar-link">05.什么是BFC？什么条件下会触发？应用场景有哪些？</a></li><li><a href="/css/display.html" class="sidebar-link">06.使用display:inline-block会产生什么问题？解决方法？</a></li><li><a href="/css/007.html" class="sidebar-link">07.div垂直居中，左右10px，高度始终为宽度一半</a></li><li><a href="/css/008.html" class="sidebar-link">08.CSS如何进行品字布局？</a></li><li><a href="/css/009.html" class="sidebar-link">09.CSS如何进行圣杯布局？</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/js/001" class="sidebar-heading clickable"><span>JS-基础</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/js-v8/001" class="sidebar-heading clickable"><span>JS-V8引擎原理 </span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/js-async/001" class="sidebar-heading clickable"><span>JS-异步I/O及异步编程</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/http/000" class="sidebar-heading clickable"><span>HTTP</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/extend/002" class="sidebar-heading clickable"><span>拓展阅读</span> <span class="arrow right"></span></a> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="css长度单位px、em、rem"><a href="#css长度单位px、em、rem" class="header-anchor">#</a> CSS长度单位px、em、rem</h1> <h2 id="css长度单位"><a href="#css长度单位" class="header-anchor">#</a> CSS长度单位</h2> <ul><li>绝对长度单位。 绝对长度单位表示为一个固定的值，不会改变。不利于页面渲染。
<ul><li>in,英寸</li> <li>cm, 里面</li> <li>mm, 毫米</li> <li>pt</li> <li>pc</li></ul></li> <li>相对长度单位。 其长度单位会随着它的参考值的变化而变化。
<ul><li>px,像素</li> <li>em,元素的字体高度</li> <li>%,百分比</li> <li>rem,根元素的font-size</li> <li>vm,视窗宽度，1vw=视窗宽度的1%</li> <li>vh,视窗高度，1vh=视窗高度的1%</li></ul></li></ul> <h2 id="物理像素-设备像素"><a href="#物理像素-设备像素" class="header-anchor">#</a> 物理像素(设备像素)</h2> <p>比如有一个图片，细分，最小单位就是像素。也就是说，图片由许多的像素构成。像素是小方块，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。</p> <p><a data-fancybox="" title="result" href="/images/css-px.png"><img src="/images/css-px.png" alt="result"></a></p> <p>一个设备生产出来，它们的像素就已经确定了。iPhone5的分辨率是640x1136px,代表屏幕由640行，1136列像素小方块组成</p> <blockquote><p>为了理解像素和避免与CSS像素混淆，可以将物理像素当做物理小方块。比如iPhone5的像素是640X1136px,可以当做640*1136个小方块。</p></blockquote> <h2 id="分辨率"><a href="#分辨率" class="header-anchor">#</a> 分辨率</h2> <p>也叫做解析度，解像度。可以从显示分辨率与图像分辨率两个方向来分类。</p> <ul><li><p>屏幕分辨率。是屏幕图像的精密度，是指显示器所能显示的像素有多少，即显示器可以可以显示的小方块有多少个。</p> <ul><li>显示器的可显示的小方块越多，画面就越精细，同样的屏幕区域内能显示的信息也越多</li> <li>可以把整个图像想象成是一个大型的棋盘，而分辨率的表示方式就是所有经线和纬线交叉点的数目。棋盘的小方块越多，可以放的棋子就越多。
<ul><li>显示分辨率一定的情况下，显示屏越小图像越清晰，反之，显示屏大小固定时，显示分辨率越高图像越清晰。(小方块一样多的情况下，显示屏越小越清晰；屏幕大小一样大的时候，小方块越多图形越清晰)</li></ul></li></ul></li></ul> <h2 id="css像素px"><a href="#css像素px" class="header-anchor">#</a> CSS像素px</h2> <p>CSS像素的单位也叫做px。它是图像显示的基本单元，既不是一个确定的物理量，也不是一个点或者小方块，而是一个抽象概念。所以在谈论像素时一定要清楚它的上下文！</p> <ul><li>为了保证阅读体验一致，CSS可以自动在不同设备之间可以调节。即一份代码可以在不同的大小的设备之间显示，并且可以保证阅读体验一致。</li> <li>默认情况下一个CSS像素应该是等于一个物理像素的宽度。</li> <li>但是在高PPI的设备上，CSS像素甚至在默认状态下就相当于多个物理像素的尺寸。比如iPhone的屏幕对比一般的手机屏幕会看起来更精细清晰一些。</li> <li>在浏览器上通过ctrl +/-可以扩大缩小屏幕，其实就是屏幕分辩率的调低/调高。ctrl +屏幕放大，分辨率降低。</li> <li>iPhone6,7,8都是两倍屏手机，即一个CSS像素等于2物理像素。iPhone6Plus等是三倍屏手机，一个CSS像素等于3物理像素。</li> <li>以iPhone6为例，设计稿给出一个图片宽高为40*40。在实际开发中要除以2，宽高要写成20x20。因为iPhone6是两倍屏手机。</li></ul> <h2 id="em"><a href="#em" class="header-anchor">#</a> em</h2> <p>em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸,浏览器字体默认为16px。</p> <ul><li>所以，1em = 16px。默认情况下。</li></ul> <h3 id="如何高效使用em呢"><a href="#如何高效使用em呢" class="header-anchor">#</a> 如何高效使用em呢</h3> <ul><li>body里声明font-size:62.5%。即全局声明1em = 16px * 62.5% = 10px</li> <li>之后可以把em当做px使用。当然此时，1em = 10px</li> <li>如果在父容器里说明了font-size:20px,那么在子容器里的1em就等于20px。</li></ul> <h2 id="rem"><a href="#rem" class="header-anchor">#</a> rem</h2> <p>rem单位是相对于字体大小的<strong>html</strong>元素，也称为根元素。</p> <div class="language-html extra-class"><pre class="language-html"><code>html {
  font-size: 10px; /* 不建议设置 font-size: 62.5%; 在 IE 9-11 上有偏差，具体表现为 1rem = 9.93px。 */
}

.sqaure {
  width: 5rem;  /* 50px */
  height: 5rem; /* 50px */
}
</code></pre></div><h2 id="em与rem"><a href="#em与rem" class="header-anchor">#</a> em与rem</h2> <ul><li>rem是相对于根元素（html）的字体大小，而em是相对于其父元素的字体大小。</li> <li>em最多取到小数点的后三位</li></ul> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
  <span class="token selector">html</span><span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token punctuation">}</span>
  <span class="token selector">body</span><span class="token punctuation">{</span> 
    <span class="token property">font-size</span><span class="token punctuation">:</span> 1.4rem<span class="token punctuation">;</span>  <span class="token comment">/* 1rem = 28px */</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 0.7rem<span class="token punctuation">;</span>  <span class="token comment">/* 0.7rem = 14px */</span>
  <span class="token punctuation">}</span> 
  <span class="token selector">div</span><span class="token punctuation">{</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span>  <span class="token comment">/* 1em = 28px */</span>
  <span class="token punctuation">}</span>
  <span class="token selector">span</span><span class="token punctuation">{</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span>1rem<span class="token punctuation">;</span>  <span class="token comment">/* 1rem = 20px */</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 0.9em<span class="token punctuation">;</span>  <span class="token comment">/* 1em = 18px */</span>
  <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>   
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>  
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>上面的例子中，发现了一个有意思的情况。em 会层层继承父元素的字体大小，很容易造成字体大小的混乱。所以以后用rem会更好。</p> <h2 id="rpx"><a href="#rpx" class="header-anchor">#</a> rpx</h2> <p>rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。</p> <p>无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度，拿iPhone6来讲，屏幕宽度为375px，把它分为750rpx后， 1rpx = 0.5px = 1物理像素。</p> <p><a data-fancybox="" title="result" href="/images/css-rpx.png"><img src="/images/css-rpx.png" alt="result"></a></p> <h2 id="vw-和-vh"><a href="#vw-和-vh" class="header-anchor">#</a> vw 和 vh</h2> <ul><li>vw,视窗宽度，1vw=视窗宽度的1%</li> <li>vh,视窗高度，1vh=视窗高度的1%</li> <li>如果浏览器的高是900px,1vh求得的值为9px。同理，如果显示窗口宽度为750px,1vw求得的值为7.5px。</li></ul> <h2 id="vmin-和-vmax"><a href="#vmin-和-vmax" class="header-anchor">#</a> vmin 和 vmax</h2> <ul><li>vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值。</li> <li>浏览器的高为1100px、宽为700px，那么1vmin就是7px，1vmax就是11px</li> <li>浏览器的高为800px，宽为1080px，那么1vmin也是8px，1vmax也是10.8px</li> <li>vmin取宽度高度两者更小者/100</li> <li>vmax取宽度高度两者更大者/100</li></ul> <p><strong>哪些地方可以用到</strong></p> <ul><li>一个总是在屏幕上可见的元素。使用高度和宽度设置为低于100的vmin值将可以实现这个效果。</li> <li>一个总是覆盖可视窗口的正方形(一直接触屏幕的四条边)</li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100vmax<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100vmax<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><a href="https://juejin.im/post/5d3920ef51882554672e3fb0" target="_blank" rel="noopener noreferrer">转载来源<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/css/image.html" class="prev">
        01.图片
      </a></span> <span class="next"><a href="/css/juzhong.html">
        03.水平垂直居中
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.e358a08d.js" defer></script><script src="/assets/js/2.88fa18d1.js" defer></script><script src="/assets/js/14.3e67795b.js" defer></script>
  </body>
</html>
